<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="用户管理" name="fans">
          <el-row>
            <el-col v-for=" (item,index) in fansList" :key="index" :xs="24" :sm='12' :md='6' :lg='6'>
              <div class="fans-item">
                <el-avatar :size="80" :src="item.photo" fit='cover' @error="errorHandler">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                </el-avatar>
                <p>{{item.name}}</p>
                <template>
                  <el-tag>+关注</el-tag>
                </template>
              </div>
            </el-col>
          </el-row>
          <el-pagination background @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.per_page" layout="total,prev, pager, next" :total="totalCount">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="echarts">
          <div ref="echartsRef" style="width: 600px;height:400px;"></div>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>
<script>
import echarts from 'echarts'

import { getfanslist } from '@/api/user.js'
export default {
  data() {
    return {
      activeName: 'echarts',
      fansList: [],
      totalCount: 0,
      queryInfo: {
        page: 1,
        per_page: 20
      },
      option: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    }
  },
  created() {
    this.loadfanslist()
  },
  mounted() {
    var myChart = echarts.init(this.$refs.echartsRef)
    myChart.setOption(this.option)
  },
  methods: {
    loadfanslist() {
      getfanslist(this.queryInfo)
        .then(res => {
          this.fansList = res.data.data.results
          this.totalCount = res.data.data.total_count
        })
        .catch(() => {
          this.$message.error('获取数据列表失败！')
        })
    },
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.loadfanslist()
    },
    errorHandler() {
      return true
    }
  }
}
</script>

<style scoped>
.fans-item {
  margin: 10px;
  width: 170px;
  height: 190px;
  text-align: center;
  padding: 10px 0;
  border: 1px dashed #ddd;
}
</style>
